<template>
	<view class="OrderManagement">
		<view :style="{'padding-top': statusBarHeight + 50 + 'px'}">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<u-navbar>
				<view>
					<u-search placeholder="搜索我的订单" v-model="keyword" @search="searchBtn" :show-action="false"
						action-text="搜索" :animation="true" @custom="searchBtn"></u-search>
				</view>
			</u-navbar>
			<view class="NavigationBox" :style="{'top': statusBarHeight>0?statusBarHeight + 45 + 'px':0 + 'px'}">
				<view class="NavigationItem" :class="{currentColor:current==index}" v-for="(item,index) in navList"
 :key="index" @click="selectItem(index)">{{item.name}}</view>
			</view>
			<view class="OrderManagementBox">
				<view class="orderList" v-if="list.length>0">
					<view class="orderItem" v-for="(item,index) in list" :key="index" @click="toGroupOrder"
						:data-id="item.id">
						<view class="order_top">
							<view class="orderNameBox">
								<view class="orderImage">
									<image src="/static/mine/order.png" mode=""></image>
								</view>
								<view class="orderName" v-if="current==0">{{item.name}}</view>
								<view class="orderName" v-else>{{item.shop_package[0].name}}</view>
							</view>
							<view class="Write" v-if="current==1">已核销</view>
							<view class="Write" v-if="current==2">已退款</view>
						</view>
						<view class="orderInfo">
							<view class="infoImage" v-if="current==0">
								<view style="background-position: center;background-size: cover;width: 100%;height: 100%;" :style="{'background-image':'url('+getImage(item.pack_img[0].image_url)+')'}" v-if="item.pack_img"></view>
								<!-- <image :src="getImage(item.image.image_url)" mode="" v-if="item.image"></image> -->
							</view>
							<view class="infoImage" v-else>
								<view style="background-position: center;background-size: cover;width: 100%;height: 100%;" :style="{'background-image':'url('+getImage(item.shop_package[0].title_image)+')'}" v-if="item.shop_package"></view>
							</view>
							<view class="info_R" v-if="current==0">
								<view class="infotext">上架：{{item.stock_num==0?'不限':item.allNum}}</view>
								<view class="infotext">已售：{{item.sales_volume}}</view>
								<view class="infotext">剩余：{{item.stock_num==0?'不限':item.num}}</view>
							</view>
							<view class="info_R" v-if="current==1">
								<view class="infotext">数量：{{item.num}}</view>
								<view class="infotext">付款金额：￥{{item.pay_money}}</view>
								<view class="infotext">核销时间：{{item.update_time}}</view>
							</view>
							<view class="info_R" v-if="current==2">
								<view class="infotext">数量：{{item.num}}</view>
								<view class="infotext">退款金额：￥{{item.money}}</view>
								<!-- <view class="infotext">退款事由：计划有变，没时间消费</view> -->
							</view>
						</view>
						<view class="editBox" v-if="current==0">
							<view class="editBtn" @click.stop="editGroupTop" :data-index="index"
								v-if="item.is_upper_frame==0">上架</view>
							<view class="editBtn" @click.stop="editGroupBottom" :data-index="index"
								v-if="item.is_upper_frame==1">下架</view>
							<view class="editBtn" style="margin-left: 30upx;">编辑</view>
							<!-- <view class="editBtn" @click.stop="exportFun">导出</view> -->
						</view>
						<view class="editBox" v-if="current==2">
							<view class="editBtn" style="margin-right: 30upx;" @click.stop="passOrder" data-type="pass" :data-index="index"
								v-if="item.type!=4&&item.is_refund==1">通过</view>
							<view class="editBtn" @click.stop="passOrder" data-type="refund" :data-index="index"
								v-if="item.type!=4&&item.is_refund==1">拒绝</view>
							<view class="editBtn" v-if="item.type==4">已退款</view>
						</view>
					</view>
				</view>
				<view class="emptyBox" v-if="list.length==0">
					<u-empty text="列表为空" mode="list" icon-size="200"></u-empty>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				type: -1,
				keyword: "",
				navList: [{
					name: '售卖份额'
				}, {
					name: '核销记录'
				}, {
					name: '退款/售后'
				}],
				current: 0,
				list: [],
				statusBarHeight: 0,
				page: 1
			}
		},
		onReachBottom() {
			if (!this.moreFlag) {
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getList();
		},
		onLoad(options) {
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					
					_that.statusBarHeight = e.statusBarHeight;
				}
			})
			if (options.index) {
				this.current = options.index - 1
			}
			if(this.current == 0){
				this.getList();
			}else if(this.current == 1){
				this.getOrderList();
			}else if(this.current == 2){
				this.getOrderList();
			}
		},
		onShow() {
			
		},
		methods: {
			passOrder(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				let obj = {};
				obj.order_number = this.list[index].order_number;
				if(type=='pass'){
					obj.type = 1;
				}else{
					obj.type = 2;
				}
				this.$u.api.shopPackageOrderIsRefund(obj).then(res=>{
					
					if(type=='pass'){
						this.$refs.uToast.show({
							title: "已退款",
							type: "success",
							duration: 2000
						})
						this.page = 1;
						this.getList();
					}else{
						this.$refs.uToast.show({
							title: "已拒绝退款",
							type: "success",
							duration: 2000
						})
						this.page = 1;
						this.getList();
					}
				})
			},
			exportFun() {
				uni.navigateTo({
					url:"/pages/pagetwo/pages/exportGroup/exportGroup?type=td"
				})
			},
			editGroupBottom(e) {
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let obj = {};
				obj.is_upper_frame = 0;
				obj.user_id = uni.getStorageSync("userId");
				obj.id = this.list[index].id;
				this.$u.api.shopPackageUpperLowerShelves(obj).then(res => {
					
					this.$refs.uToast.show({
						title: "下架成功",
						type: "success",
						duration: 2000
					})
					let objs = this.list[index];
					objs.is_upper_frame = 0;
					this.list.splice(index, 1, objs);
				})
			},
			editGroupTop(e) {
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let obj = {};
				obj.is_upper_frame = 1;
				obj.user_id = uni.getStorageSync("userId");
				obj.id = this.list[index].id;
				this.$u.api.shopPackageUpperLowerShelves(obj).then(res => {
					
					this.$refs.uToast.show({
						title: "上架成功",
						type: "success",
						duration: 2000
					})
					let objs = this.list[index];
					objs.is_upper_frame = 1;
					this.list.splice(index, 1, objs);
				})
			},
			toGroupOrder(e) {
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				if (id) {
					uni.navigateTo({
						url: "/pages/pagethree/pages/GroupOrder/GroupOrder?id=" + id
					})
				} else {
					uni.navigateTo({
						url: "/pages/pagethree/pages/GroupOrder/GroupOrder"
					})
				}

			},
			getImage(url) {
				if (url && (url.indexOf("http://") != -1 || url.indexOf("https://") != -1)) {
					return url;
				} else {
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getOrderList(){
				let obj = {};
				if(this.current==1){
					obj.type = 2;
				}else if(this.current==2){
					obj.is_refund = 1;
				}
				obj.search = this.search;
				obj.end_time = this.end_time;
				obj.start_time = this.start_time;
				// obj.shop_package_id = 2;
				obj.is_business = 1;
				obj.user_id = uni.getStorageSync("userId");
				this.$u.api.shopPackageOrderList(obj).then(res=>{
					
					this.list = res.list.data;
				})
			},
			getList() {
				let obj = {};
				obj.page = this.page;
				obj.user_id = uni.getStorageSync("userId");
				obj.is_upper_frame = 1;
				if(this.search !='undefined' || this.search !=false ){
          obj.search = this.search;
        }
				this.$u.api.shopPackageList(obj).then(res => {
					
					if (this.page == 1) {
						this.list = res.list.map(cur => {
							cur.allNum = Number(cur.sales_volume) + Number(cur.num);
							return cur;
						});
					} else {
						this.list = this.list.concat(res.list.map(cur => {
							cur.allNum = Number(cur.sales_volume) + Number(cur.num);
							return cur;
						}));
					}
					if (this.page < res.list.last_page) {
						this.moreFlag = true;
					} else {
						this.moreFlag = false;
					}
				})
			},
			selectItem(index) {
				this.current = index;
				this.page = 1;
				this.list = [];
				if(this.current == 0){
					this.getList();
				}else if(this.current == 1){
					this.getOrderList();
				}else if(this.current == 2){
					this.getOrderList();
				}
			},
			//搜索
			searchBtn() {
				alert(this.keyword)
			}
		}
	}
</script>

<style scoped lang="less">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.OrderManagement {
		background-color: #F3F3F3;
		min-height: 100vh;

		// overflow: hidden;
		// padding-top: 168upx;
		.NavigationBox {
			position: fixed;
			// top: 0;
			background-color: #fff;
			padding: 16upx 96upx;
			width: 750upx;
			height: 72upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			// position: fixed;
			// top: 88upx;
			// width: 750upx;
			// background-color: #fff;
			// padding: 16upx 96upx;
			.NavigationItem {
				padding: 8upx 0;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			.currentColor {
				color: #FF801D;
				border-bottom: 5upx solid #FF801D;
			}
		}

		.OrderManagementBox {
			// #ifdef MP-WEIXIN
			padding: 32upx 24upx;
			// #endif
			// #ifdef APP-PLUS
			padding: 0 24upx;

			// #endif
			.orderList {
				.orderItem {
					width: 702upx;
					background: #FFFFFF;
					opacity: 1;
					border-radius: 8upx;
					padding: 0 24upx;
					margin-bottom: 16upx;

					.order_top {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.orderNameBox {
							display: flex;
							align-items: center;
							padding: 24upx 0;

							.orderImage {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 24upx;
								height: 24upx;
								background: #FFAC3F;
								border-radius: 50%;
								opacity: 1;

								image {
									width: 16upx;
									height: 16upx;
								}
							}

							.orderName {
								font-size: 20upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #333333;
								margin-left: 8upx;
							}
						}

						.Write {
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}
					}

					.orderInfo {
						display: flex;
						padding-bottom: 16upx;
						border-bottom: 2upx solid #F5F5F5;

						.infoImage {
							width: 96upx;
							height: 96upx;
							border-radius: 8upx;
							// background-color: #F0AD4E;
							overflow: hidden;
							margin-right: 20upx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.info_R {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: calc(100% - 116upx);

							.infotext {
								font-size: 20upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #333333;
							}
						}
					}

					.editBox {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						padding: 16upx 0;

						.editBtn {
							min-width: 104upx;
							padding: 0 10upx;
							height: 52upx;
							border: 2upx solid #E5E5E5;
							opacity: 1;
							border-radius: 26upx;
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							line-height: 48upx;
							text-align: center;
							color: #999999;
						}
					}
				}
			}

			.emptyBox {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 750upx;
				height: 600upx;
			}
		}
	}
</style>
